<template>
  <div class="login-page">
    <van-nav-bar title="账号登录" left-arrow @click-left="onClickLeft" />
    <div class="login-shuru">
      <van-form @submit="onSubmit">
        <van-field
          class="login-shuru-zhanghao"
          v-model="username"
          name="username"
          placeholder="请输入账号"
          :rules="[
            { required: true, message: '请填写用户名' },
            { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' },
          ]"
        />
        <van-field
          class="login-shuru-mima"
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '请填写密码' },
            { pattern: /^\w{6,}$/, message: '密码至少包含6个字符' },
          ]"
        />
        <div style="margin: 16px">
          <van-button block type="info" native-type="submit">登录</van-button>
          <!-- 跳转路由 -->
          <router-link class="link" to="/register"
            >还没有账号，去注册</router-link
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";
import { setToken } from "@/utils/storage";
import { login } from "@/API/user";
export default {
  name: "login-page",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    //点击跳转回去
    onClickLeft() {
      this.$router.push("/");
    },
    async onSubmit(values) {
      // console.log("submit", values);
      const res = await login(values);
      console.log(res);
      if (res.status === 200) {
        this.$toast.success("登录成功");
        setToken(res.body.token); //存Token
        this.$router.push("/");
      }
      this.username = "";
      this.password = "";
    },
  },
};
</script>

<style lang="less" scoped>
.login-shuru {
  margin-top: 30px;
}
.login-shuru-zhanghao {
  margin-bottom: 20px;
}
.login-shuru-mima {
  margin-bottom: 30px;
}
.link {
  margin-top: 30px;
  color: black;
  font-size: 12px;
  padding-right: 20px;
  float: left;
}
</style>
